<template>
    <div class="home">
        <div class="content">
            <div class="left public">
                <h3>教练宝典APP</h3>
                <img class="pic"
                    src="https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/f4b3be31a83c5d02bf5cb2e0fb11636b.png"
                    alt="">
                <div class="bg"></div>
            </div>
            <div class="center public">
                <h3>教练宝典APP</h3>
                <img class="pic"
                    src="https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/48726c2bb302051522dfc028c0532488.png"
                    alt="">
                <div class="bg  bg2"></div>
            </div>
            <div class="right public">
                <h3>教练宝典APP</h3>
                <img class="pic"
                    src="https://www.jiakaobaodian.com/core-assets/jiakao/application/home/files/40ab1d6a3ed0757b51ad19cbec3b29c4.png"
                    alt="">
                <div class="bg"></div>
            </div>

        </div>
    </div>
</template>

<script>
    export default{}
</script>

<style  lang="scss"  scoped>
.home {
    height: 560px;
    background-color: #f5f5f5;
    margin-top: 70px;
    //margin-bottom: 60px;

    .content {
        display: flex;
        justify-content: space-between;
        
        position: relative;
        width: 1200px;
        height: 560px;
        margin:  0 auto;
        overflow: hidden;
        padding: 0 30px;

        .public {
            text-align: center;
            transition: all .6s;
            position: relative;
            bottom: -40px;


            .pic {
                
                width: 95%;
                height: 95%;
            }

            &:hover {
                transform: translateY(-50px);

                .bg {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -134px);
                    width: 100%;
                    height: 600px;
                    background: center url(https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/2d1920df784226626de9efd062e808a2.png) no-repeat;
                    background-color: rgba(255, 255, 255, .5);
                }

                .bg2 {
                    background: center url(https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/47b4a64f54ae7eaace0daaf9dc3446c5.png) no-repeat;
                    background-size: 150px 150px;

                    background-color: rgba(255, 255, 255, .5);
                }
            }

            h3 {
                font-size: 20px;
                font-weight: normal;
                color: rgb(51, 51, 51);
                margin-bottom: 37px;
            }
        }

        .left {
            width: 300px;
            height: 500px;
            bottom: -80px;
        }

        .center {
            width: 430px;
            height: 540px;
            h3 {
                font-size: 20px;
                font-weight: normal;
                color: rgb(51, 51, 51);
                margin-bottom: 27px;
            }
            
        }

        .right {
            width: 265px;
            height: 428px;
            bottom: -120px;
        }
    }
}
</style>